<script setup>
import { queryProductMessage } from '@/api/Base/repositoryManager';
import { querySelfDeliver } from '@/api/Base/selfDeliver';
import { format, subMonths } from 'date-fns';
import { formatDate } from 'date-fns/format';
import { MdPreview } from 'md-editor-v3';


definePage({
  name: 'productHistory',
  meta: {
    level: 2,
    title: '出库记录',
  },
})

const route = useRoute()
const router = useRouter()

const outputObj = reactive({
  Product: {},
  reload: () => {
    load.value = true
    querySelfDeliver({
      "page": 1,
      "pageSize": 999999,
      "searchKeyword": route.query.id,
      "type": 0,
      "status": 0,
      "startTime": "2018-12-17",
      "endTime": "3222-08-18",
      "sendType": 0,
    }).then(res => {
      if (res.code == 0) {
        outputObj.info = res.data.list[0]
        load.value = false
        console.log(JSON.parse(outputObj.info.deliverHistory));

      }
    })
  }
})

onMounted(() => {
  outputObj.reload()
})
const load = ref(true)
function onBack() {
  if (window.history.state.back)
    history.back()
  else
    router.replace('/')
}

const fixhistory = reactive({
  search: {
    searchText: "",
    startTime: format(subMonths(new Date(), 3), "yyyy-MM-dd"),
    endTime: format(new Date(), "yyyy-MM-dd"),
    sortBy: 0,
  },
  list: [
    { time: "2024-08-31 11:50", name: "zkp", product: "Y240831001 鼠标 321354656864868", content: "啊伟大伟大伟大" },
    { time: "2024-08-31 11:50", name: "zkp", product: "Y240831001 鼠标 321354656864868", content: "啊伟大伟大伟大" },
    { time: "2024-08-31 11:50", name: "zkp", product: "Y240831001 鼠标 321354656864868", content: "啊伟大伟大伟大" },
    { time: "2024-08-31 11:50", name: "zkp", product: "Y240831001 鼠标 321354656864868", content: "啊伟大伟大伟大" },
    { time: "2024-08-31 11:50", name: "zkp", product: "Y240831001 鼠标 321354656864868", content: "啊伟大伟大伟大" },
  ],
  model: {
    startTime: {
      show: false,
    },
    endTime: {
      show: false,
    }
  },
})
const preview = computed(() => {
  var v = ""
  console.log(outputObj.info.deliverHistory);

  JSON.parse(outputObj.info.deliverHistory)?.forEach(item => {
    v = v + `${formatDate(item.updateDatatime ? item.updateDatatime : item.createDatetime, "yyyy-MM-dd hh:mm:ss")} \n ${item.eventName} ${item.status} \n___________________________________\n`;
  })
  return v
})
</script>

<template>
  <div class="bg-#f2f4f8 flex flex-col gap-10 mx-10 my-[50px]">
    <van-loading v-if="load" vertical>
      <template #icon>
        <van-icon name="star-o" size="30" />
      </template>
      加载中...
    </van-loading>

    <div v-if="!load" class="bg-white rounded-[10px] p-10">
      <div class="w-100% flex justify-between">
        <!-- 维修记录 -->
        <!-- <VanRadioGroup direction="horizontal" v-model="fixhistory.search.sortBy">
                    <VanRadio :name="0">只看这台</VanRadio>
                    <VanRadio :name="1">按序列号</VanRadio>
                </VanRadioGroup> -->
      </div>
      <MdPreview :modelValue="preview" />
    </div>
  </div>

</template>

<style lang="less" scoped>
.search {
  // width: 110px;
  height: 2rem;
  border-radius: 5px;
  opacity: 1;

  /* 纯白 */
  background: #FFFFFF;

}
</style>
